<template>
  <!-- 一键跟单页面 -->
  <view>
    <view class="service" @click="show = true">
      公共服务器 <uni-icons color="#aeb9d5" type="arrowdown"></uni-icons>
    </view>
    <view class="gendanmoney">跟单佣金</view>
    <view class="gendan-title">
      <text>跟单佣金</text>
      <text>2 VTN/日 (含体现效益)</text>
    </view>
    <view class="gendanmoney">
      <text>Okex-模拟账户</text>
      <text class="qiehuan" @click="monishow=true">账户切换
        <u-icon color="#1680ff" name="arrow-right-double"></u-icon>
      </text>
    </view>
    <!-- 模拟账户弹出层开始 -->
    <u-popup v-model="monishow" mode="bottom">
      <view class="moni-box">
        <view class="monibox-title">
          <text>选择API</text>
          <u-icon size="36" name="plus" @click="addapi"></u-icon>
        </view>
        <view class="shipan">
          <text class="shipancolor" :class="!isactiveshipan?'active-btns':''" @click="btnshipan">实盘账户</text>
          <text class="shipancolor" :class="isactiveshipan?'active-btns':''" @click="btnshipan">模拟账户</text>
        </view>
        <view class="" v-if="isshipan">
          模拟账户
        </view>
        <view class="" v-else>
          <view class="zhanghu-list" @click="checkboxmark(1)">
            <view class="zhanghu-left">
              <image src="../../static/logo.png" mode=""></image>
              <text class="binance-left">Huobi</text><text class="keyong-text">可用</text>
            </view>
            <view class="" v-if="markicon==1">
              <u-icon name="checkbox-mark"></u-icon>
            </view>
          </view>
          <view class="zhanghu-list" @click="checkboxmark(2)">
            <view class="zhanghu-left">
              <image src="../../static/logo.png" mode=""></image>
              <text class="binance-left">Binance</text><text class="keyong-text">可用</text>
            </view>
            <view class="" v-if="markicon==2">
              <u-icon name="checkbox-mark"></u-icon>
            </view>
          </view>
          <view class="zhanghu-list" @click="checkboxmark(3)">
            <view class="zhanghu-left">
              <image src="../../static/logo.png" mode=""></image>
              <text class="binance-left">Okex</text><text class="keyong-text">可用</text>
            </view>
            <view class="" v-if="markicon==3">
              <u-icon name="checkbox-mark"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 模拟账户弹出层结束 -->
    <view class="qita-input">
      <input type="text" value="" placeholder="跟投金额" />
      <text>USDT</text>
    </view>
    <view class="keyong">可用：5465546</view>
    <view class="tishi-text">为了保证策略顺利启动进行，本策略跟单投入资金限制300-2000000 USDT</view>
    <button type="primary">启动</button>
    <view class="tishi-box">
      <text class="tishi-title">提示</text>
      <view class="">
        1、付费方式为固定佣金的，启动跟单后每日自动支付佣金给发起者。
      </view>
      <view class="">
        2、付费方式为盈利分成的，启动跟单时将在您的钱包消费账户中冻结相应数额的VTN，结算时按VTN时价从保证金中扣除分成金额，支付金额最高不超过保证金全额；结算后如果跟单未停止，消费账户将再次冻结一笔保证金；停止跟单后保证金解冻。
      </view>
      <view class="">
        3、发起者停止跟单即停止支付费用。
      </view>
      <view class="">
        4、您也可以提前终止跟单，终止后即停止支付费用。
      </view>
      <view class="">
        5、为保证跟单持续执行请确保您的消费账户中拥有足够的VTN。
      </view>
    </view>

    <view class="fengxian-box">
      <view class="fengxian-title">
        风险提示
      </view>
      <view class="">
        任何策略不能保证其在未来的正盈利性，过往数据不预示未来
        表现，投资有风险，请谨慎选择。请确保本人完全理解并可以
        承担相关风险可能带来的结果。
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        monishow: false,
        isactiveshipan: false,
        isshipan: true, // 显示实盘账户
      }
    },
    methods: {
      // 跳转到添加api页面
      addapi() {
        uni.navigateTo({
          url: '../addapi/addapi'
        })
      },
      btnshipan() {
        this.isactiveshipan = !this.isactiveshipan
        this.isshipan = !this.isshipan
      },
    }
  }
</script>

<style scoped>
  page {
    background-color: #091233;
    padding: 30rpx 20rpx 0;
    color: #646a8c;
  }

  .service {
    color: #aeb9d5;
    padding: 8rpx 12rpx;
    width: 220rpx;
    text-align: center;
    background-color: #111c3a;
  }

  .gendanmoney {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4rpx solid #1680ff;
    padding: 0 10rpx;
    color: #FFFFFF;
    margin: 20rpx 0;
  }

  .qiehuan {
    color: #1680ff;
    font-size: 24rpx;
  }

  .qita-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    background-color: #121d39;
    padding: 0 40rpx;
    color: #aab5d1;
    border-radius: 10rpx;
    margin: 20rpx 0 30rpx 0;
  }

  .qita-input input {
    border-right: 1px solid #5e6987;
    width: 85%;
  }

  .gendan-title {
    display: flex;
    justify-content: space-between;
    color: #9faac8;
    background-color: #121d3b;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 40rpx;
  }

  .tishi-text {
    font-size: 24rpx;
    margin: 20rpx 0 50rpx;
  }

  .keyong {
    color: #a9b2d1;
  }

  .tishi-box {
    line-height: 46rpx;
    margin-top: 50rpx;
  }

  .tishi-title {
    color: #2c6bde;
  }

  .fengxian-title {
    color: #ba4e6d;
    text-align: center;
    margin: 20rpx 0;
  }

  .fengxian-box {
    margin: 40rpx 0;
    line-height: 35rpx;
    padding-bottom: 40rpx;
  }

  .moni-box {
    height: 600rpx;
    background-color: #131c3b;
    padding: 40rpx;
  }

  .monibox-title {
    display: flex;
    justify-content: space-between;
    color: #FFFFFF;
  }

  .shipancolor {
    color: #707b99;
    font-size: 32rpx;
  }

  .shipan {
    display: flex;
    justify-content: space-around;
    margin: 30rpx;
  }

  .zhanghu-list {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    line-height: 100rpx;
    border-bottom: 1px solid #394261;
  }

  .zhanghu-left image {
    width: 60rpx;
    height: 60rpx;
    vertical-align: middle;
    margin-right: 30rpx;
  }
  .binance-left{
    color: #FFFFFF;
    margin-right: 10rpx;
  }
  .active-btns {
    font-size: 36rpx;
    color: #FFFFFF !important;
  }
</style>
